<template>
  <ConfigProvider :props="providedProps">
    <Modal
      :active="active"
      width="520px"
      height="auto"
      auto-remove
      modal-class="createModal"
      no-footer
      transfer
      undivided
      title="新建项目"
    >
      <Form
        class="createForm"
        :ref="form"
        :model="formModel"
        label-suffix="："
        hide-asterisk
        label-align="left"
      >
        <FormItem
          required
          label="空间维度"
          prop="dimension"
          class="label-top"
          label-align="top"
          name="dimension"
        >
          <div class="dimension-group">
            <div
              v-for="dimension in dimensions"
              :key="dimension.value"
              :label="dimension.label"
              :class="{
                dimension: true,
                selected: selectedDimension === dimension.value,
              }"
              @click="handlechangeDimension(dimension)"
            >
              <div :class="dimension.icon" />
              <span>{{ dimension.label }}</span>
            </div>
          </div>
        </FormItem>
        <FormItem required label="项目名称" prop="name">
          <Input placeholder="请输入" @enter="handleSubmit"></Input>
        </FormItem>
        <FormItem required label="仿真学科" prop="simulation">
          <Select :options="simulationDisciplines" />
        </FormItem>
        <FormItem required label="求解器" prop="solver">
          <Select :options="solver" />
        </FormItem>
        <FormItem action class="footer">
          <svg-icon name="2D" color="#8BD3FF" class="test"></svg-icon>
          <Button @click="handleCancel" class="cancelBtn btn">取消</Button>
          <FormSubmit
            @submit="handleSubmit"
            label="新建"
            class="btn"
            color="#0084ff"
          />
        </FormItem>
      </Form>
    </Modal>
  </ConfigProvider>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Form,
  FormItem,
  Input,
  FormSubmit,
  Toast,
  Select,
  RadioGroup,
  Radio,
} from "cax-ui";
import { ref, defineProps, reactive, defineEmits } from "vue";
import { createProject } from "@/UI/api/projects";

interface Model {
  name: string;
  solver: string;
  simulation: string;
  dimension: string;
}

const props = defineProps({
  active: {
    type: Boolean,
    default: false,
  },
});

const providedProps = {
  default: { clearable: true },
  formItem: {
    required: true,
    span: 24,
    lg: 12,
  },
};

const selectedDimension = ref("3D");

const dimensions = [
  {
    label: "三维",
    value: "3D",
    icon: "d3",
  },
  {
    label: "二维",
    value: "2D",
    icon: "d2",
  },
  {
    label: "一维/零维",
    value: "1D",
    icon: "d1",
  },
];

const simulationDisciplines = [
  { label: "结构力学", value: "Structural mechanics" },
  { label: "流体力学", value: "Fluid dynamics" },
  { label: "计算声学", value: "Computational acoustics" },
];

const solver = [
  { label: "Nastran", value: "Nastran" },
  { label: "Abaqus", value: "Abaqus" },
  { label: "Ansys", value: "Ansys" },
  { label: "LsDyna", value: "LsDyna" },
  { label: "RADIOSS", value: "RADIOSS" },
  { label: "Exodus", value: "Exodus" },
  { label: "FEKO", value: "FEKO" },
];

const emit = defineEmits(["changeActive", "refresh"]);
const initialFormModel = {
  name: "",
  dimension: selectedDimension.value,
  simulation: "Structural mechanics",
  solver: "Nastran",
  // TODO 暂时写死
  userId: "97a9d9b1-89c1-4bcf-a2ed-94c4c46fa904",
};
const formModel = reactive({ ...initialFormModel });
const form = ref();
function handlechangeDimension(dimension: any) {
  selectedDimension.value = dimension.value;
  Object.assign(formModel, { dimension: dimension.value });
}
function handleSubmit(e: any) {
  if (!formModel?.name) {
    return;
  }
  createProject(formModel)
    .then((res) => {
      console.log(res, "res");
      emit("changeActive", false);
      emit("refresh");
      Object.assign(formModel, initialFormModel);
      Toast.success({ content: "新建项目成功", duration: 1000 });
    })
    .catch((err) => {
      console.log(err, "err");
      Toast.error({ content: "新建项目失败", duration: 1000 });
    });
}
function handleCancel() {
  emit("changeActive", false);
}
</script>
<style lang="less" scoped>
.createModal {
  position: relative;
}
.createForm {
  padding-bottom: 0;
  text-align: center;
  border-top: 1px solid #e9ecff;
  margin: -14px -14px 0;
  padding-top: 8px;
  .label-top {
    display: flex;
    flex-direction: column;
    align-items: start;
    .dimension-group {
      margin-bottom: 16px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .dimension {
      display: flex;
      margin-right: 8px;
      flex: 1;
      justify-content: center;
      align-items: center;
      border: 1px solid #dcdee1;
      height: 48px;
      border-radius: 4px;
      img {
        margin-right: 4px;
      }
      &:hover {
        cursor: pointer;
        border-color: #2ea1ff;
        color: #2ea1ff;
      }
      &:hover .d1 {
        background-image: url("@/UI/assets/1D-selected.svg");
      }
      &:hover .d2 {
        background-image: url("@/UI/assets/2D-selected.svg");
      }
      &:hover .d3 {
        background-image: url("@/UI/assets/3D-selected.svg");
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .d1,
    .d2,
    .d3 {
      margin-right: 4px;
      width: 16px;
      height: 16px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .d1 {
      background-image: url("@/UI/assets/1D.svg");
    }
    .d2 {
      background-image: url("@/UI/assets/2D.svg");
    }
    .d3 {
      background-image: url("@/UI/assets/3D.svg");
    }
    .selected {
      background-color: #e8f8ff;
      color: #2ea1ff;
      border: 1px solid #8bd3ff;
      .d1 {
        background-image: url("@/UI/assets/1D-selected.svg");
      }
      .d2 {
        background-image: url("@/UI/assets/2D-selected.svg");
      }
      .d3 {
        background-image: url("@/UI/assets/3D-selected.svg");
      }
    }
    :deep(.vxp-form__control) {
      justify-content: space-between;
      width: 100% !important;
    }
  }
}

.cancelBtn {
  background-color: #f9fbfc;
}
.btn {
  border-radius: 2px;
}
:deep(.vxp-form__item) {
  margin-bottom: 0px;
  display: flex;
  align-items: center !important;
  padding: 8px 24px !important;
}

.footer {
  border-top: 1px solid #e9ecff;
  padding: 12px 24px 0 !important;
  margin-left: 0;
  margin-top: 24px;
}

:deep(.vxp-form__label) {
  width: 105px !important;
  padding-inline-end: 4px;
  height: 32px;
}
:deep(.vxp-form__control--action) {
  justify-content: flex-end !important;
}
:deep(.vxp-form__error-tip) {
  margin-top: -5px !important;
}
:deep(.vxp-option) {
  margin-left: -8px;
}
:deep(.vxp-select__label) {
  text-align: left;
}
</style>
